<template>
    <div class="landing-container">
        <!-- 顶部导航栏 -->
        <el-header class="landing-header">
            <div class="header-content">
                <h1 class="system-logo">通用后台管理系统</h1>
                <div><span>欢迎您！{{ username }}</span>
                    <!-- <el-button class="logout-btn"
                     @click="handleLogout" text>
                        退出登录
                    </el-button> -->
                </div>

            </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main class="landing-main">
            <div class="welcome-section">
                <el-row :gutter="20" class="welcome-row">
                    <el-col :span="14" class="welcome-text">
                        <h2 class="welcome-title">欢迎使用通用后台管理系统</h2>
                        <p class="welcome-desc">
                            高效、安全、可靠的企业级管理解决方案，帮助您轻松管理业务数据，提升工作效率。
                        </p>
                        <el-button class="enter-button" type="primary" size="large" @click="goToDashboard"
                            icon="ArrowRight">
                            进入管理控制台
                        </el-button>
                    </el-col>
                    <el-col :span="10" class="welcome-image">
                    </el-col>
                </el-row>
            </div>

            <!-- 功能特点区 -->
            <div class="features-section">
                <h3 class="section-title">系统特点</h3>
                <el-row :gutter="20" class="features-grid">
                    <el-col :span="8">
                        <el-card class="feature-card" shadow="hover">
                            <div class="feature-icon">
                                <el-icon><School/></el-icon>
                            </div>
                            <h4 class="feature-title">安全可靠</h4>
                            <p class="feature-desc">多重身份验证，数据加密存储，确保信息安全</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="feature-card" shadow="hover">
                            <div class="feature-icon">
                                <el-icon>
                                    <Orange/>
                                </el-icon>
                            </div>
                            <h4 class="feature-title">高效便捷</h4>
                            <p class="feature-desc">直观操作界面，丰富功能模块，提升工作效率</p>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="feature-card" shadow="hover">
                            <div class="feature-icon"><el-icon>
                                    <Setting />
                                </el-icon></div>
                            <h4 class="feature-title">灵活配置</h4>
                            <p class="feature-desc">自定义功能模块，个性化界面设置，满足不同需求</p>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>

        <!-- 页脚 -->
        <el-footer class="landing-footer">
            <p>© 2025 23级2班2组 - 版权所有</p>
        </el-footer>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { Setting, School, Orange } from '@element-plus/icons-vue';

const router = useRouter();
const username = ref('张三')

// 导航到控制台
const goToDashboard = () => {
    router.push('/dashboard');
};

// 退出登录
// const handleLogout = () => {
//     authStore.logout();
//     router.push('/login');
//     console.log(1111);
// };
</script>

<style scoped>
@import url('../styles/homecss.css');
</style>